<template>
  <div class="box">
    <div class="top">
      <span>作业范围分配</span>
      <el-button size="medium" type="primary">主要按钮</el-button>
    </div>
    <div class="input">
      <span>地区关键词：</span>
      <el-input v-model="form.name" style="width:250px" placeholder="请输入地区关键词" />
    </div>
    <div id="map" />
  </div>

</template>
<script>
export default {
  data() {
    return {
      form: {}
    }
  },
  mounted() {
    this.map = new BMap.Map('map') // 创建地图实例
    const point = new BMap.Point(116.404, 39.915) // 设置地图中心点坐标
    this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和缩放级别
    this.map.enableScrollWheelZoom(true) // 启用滚轮缩放功能
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.box{
    padding: 15px 20px;
}

.top{
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    width: 100%;
}

.top span{
    font-weight: 900;
}

.input{
    padding: 10px 20px;
    width: 100%;
     background-color: white;
}

.input span{
font-size: 15px;
}

#map{
  width: 100%;
  height: 400px;
  padding: 20px;
}
</style>
